<template>
	<view class="data_list_view classicScriptsEx">
		<template v-if="typeList.length">
			<!-- 数据列表 -->
			<scroll-view :scroll-y="true" class="typeList">
				<view class="typeList_item"
				 v-for="(item, index) in typeList" :key="index"
				 @tap="changeType(item, index)"
				 :class="{ 'typeList_selectItem' : selectTypeCurrent == index }">
				 {{ item.title }}
			 </view>
			</scroll-view>
			<scroll-view :scroll-y="true" class="commodityList">
				<view class="commodityList_item"
				v-for="(item, index) in list" :key="index"
				@tap="tapCommodity(item)">
					<view class="commodityList_item_img">
						<image :src="item.imgSrc"></image>
					</view>
					<view class="commodityList_item_title">{{ item.title }}</view>
				</view>
			</scroll-view>
		</template>
		
		<emptyData v-else :title="emptyTitle" :loading="loading"></emptyData>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	
	// 页面加载完成
	onLoad(() => {
		getTypeList();
	})
	
	onReachBottom(()=>{
		getList();
	})
	
	// 无数据显示
	import emptyData from '../../components/empty_data/empty_data.vue';
	const emptyTitle = ref('考典秘籍');
	
	// 加载状态
	const loading = ref(false);
	// 类型列表
	const selectTypeCurrent = ref(0);
	let typeList = reactive([])
	let list = ref([]);
	const page = reactive({
		pageNo: 1,
		pageSize: 10,
		total: 0
	})
	
	// 切换类型
	function changeType(data, index) {
		selectTypeCurrent.value = index;
		page.pageNo = 1;
		page.total = 0;
	}
	// 获取类型列表
	function getTypeList() {
		let params = {
			pageNo: 1,
			pageSize: 999
		};
		uni.$request('/api/busi/exam/class/select/all', params).then((res)=>{
			if(res.status == 200) {
				typeList = res.data.examClassList;
			}
			uni.hideLoading();
			loading.value = false;
		})
	}
	// 获取列表
	function getList() {
		loading.value = true;
		uni.showLoading({
			title: '加载中',
			mask: false
		})
		let params = {
			pageNo: page.pageNo,
			pageSize: page.pageSize
		};
		uni.$request('/api/busi/print/select', params).then((res)=>{
			if(res.status == 200) {
				page.total = res.data.total;
				if(res.data.printOrderList.length) {
					list = list.concat(res.data.printOrderList);
				}
			}
			uni.hideLoading();
			loading.value = false;
		}).fail((err)=>{
			uni.hideLoading();
			uni.showToast({
				icon: 'error',
				title: '延迟请重试！'
			})
		})
	}
	// 查看详情
	function tapCommodity(data) {
		
	}
	
</script>

<style lang="less">
.data_list_view {
	position: relative;
	min-height: 100vh;
	width: 100%;
	box-sizing: border-box;
	background-color: #f5f5f5;
}
.typeList {
	display: inline-block;
	height: 100vh;
	width: 200rpx;
	font-size: 28rpx;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 40.5rpx;
	color: rgba(56, 56, 56, 1);
	text-align: left;
}
.typeList_item {
	padding: 28rpx 24rpx;
}
.typeList_selectItem {
	background-color: #ffffff;
	border-left: 8rpx solid rgba(69, 145, 230, 1);
}

.commodityList {
	height: 100vh;
	background-color: #ffffff;
	display: inline-block;
	width: calc(100% - 200rpx);
	padding: 0 32rpx;
	box-sizing: border-box;
}
.commodityList_item {
	margin-bottom: 40rpx;
	&:last-child {
		margin-bottom: 0;
	}
	.commodityList_item_img {
		width: calc(100% - 16rpx);
		height: 218rpx;
		margin: 0 auto 20rpx;
		image {
			height: 100%;
			width: 100%;
		}
	}
	.commodityList_item_title {
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 40.5rpx;
	}
}
</style>
